.basic-layout {
  display: grid;
  height: 100%;
  background-color: var(--g-bg);
  transition: all 0.2s linear;
  grid-template-columns: var(--g-sider-width) 1fr;
  grid-template-rows: var(--g-header-height) var(--g-tabs-height) 1fr auto;

  &.collapsed {
    grid-template-columns: var(--g-sider-collapsed-width) 1fr;
  }

  // &.with-sider {
  // }
}

.sider {
  position: relative;
  background: var(--g-sider-bg);
  box-shadow: var(--g-sider-shadow);
  transition: all 0.2s linear;
  grid-area: 2 / 1 / 5 / 2;

  .menu {
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background-color: rgb(0 0 0 / 88%);
    }

    // ::-webkit-scrollbar-track {
    //   background-color: rgb(23 44 22 / 10%);

    //   /* -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1); */
    //   border-radius: 5px;
    // }

    /* 定义滑块内阴影+圆角 */
    // ::-webkit-scrollbar-thumb {
    //   /* -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1); */
    //   background-color: rgb(231 33 123 / 100%);
    //   border-radius: 5px;
    // }
  }
}

.content {
  position: relative;
  display: flex;
  min-height: 0;
  padding: var(--g-content-padding);

  // padding-bottom: 0;
  overflow-y: auto;
  grid-area: 3 / 2 / 4 / 3;
  flex-direction: column;

  .breadcrumb {
    flex-shrink: 0;
    margin-bottom: 12px;
  }

  &-inner {
    padding: var(--g-content-padding);
    background: var(--g-content-bg);
    border-radius: var(--g-content-radius);
    box-shadow: var(--g-content-shadow);
    flex-grow: 1;
  }
}

.footer {
  padding: 24px 0;
  text-align: center;
  grid-area: 4 / 2 / 5 / 3;

  .copyright {
    font-size: 14px;
    color: #9ba2ab;
  }
}

.sider-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background-color: var(--g-sider-bg);
}
